@mixin background-image($image, $width: 100%, $height: auto, $left: 0, $top: 0, $repeat: no-repeat) {
  background-image: url($image);
  background-size: $width $height;
  background-position: $left $top;
  background-repeat: $repeat;
}

@mixin flex($direct: row, $row: center, $cloumn: center) {
  display: flex;
  flex-direction: $direct;
  justify-content: $row;
  align-items: $cloumn;
}

@mixin position($position: absolute, $type: 'topLeft', $pos1: 0, $pos2: 0, $zIndex: auto) {
  position: $position;
  @if $type == 'topLeft' {
    top: $pos1;
    left: $pos2;
  } @else if $type == 'topRight' {
    top: $pos1;
    right: $pos2;
  } @else if $type == 'bottomLeft' {
    bottom: $pos1;
    left: $pos2;
  } @else if $type == 'bottomRight' {
    bottom: $pos1;
    right: $pos2;
  }
  z-index: $zIndex;
}

@mixin position-center($type: 'row') {
  position: absolute;
  left: 0;
  right: 0;
  @if $type == 'middle' {
    top: 0;
    bottom: 0;
    margin: auto;
  } @else {
    margin: 0 auto;
  }
}

@mixin font($size: inherit, $height: inherit, $weight: inherit, $color: inherit, $pos: inherit) {
  font-size: $size;
  font-weight: $weight;
  color: $color;
  line-height: $height;
  text-align: $pos;
}

@mixin rect($width, $height) {
  width: $width;
  height: $height;
}

@mixin ellipse() {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@mixin ellipse-n($n) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: $n;
  -webkit-box-orient: vertical;
}
